export const Demo1 = `
~~~js
import React from 'react';
import { Text } from 'react-fule-ui';

export default function DomeText() {
  return (
    <>
      <p>
        <Text info="#000000" />
      </p>
      <p>
        <Text theme="normal" info="#333333" />
      </p>
      <p>
        <Text theme="weak" info="#666666" />
      </p>
      <p>
        <Text theme="error" info="#e54545" />
      </p>
      <p>
        <Text theme="success" info="#0abf5b" />
      </p>
      <p>
        <Text theme="link" info="#0068ed" />
      </p>
    </>
  );
}
~~~`;

export const Demo2 = `
~~~js
import React from 'react';
import { Text } from 'react-fule-ui';

export default function DomeText() {
  return (
    <>
      <div className="dome-text">
        <Text
          type="div"
          theme="normal"
          info="左对文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
          align="left"
        />
      </div>
      <div className="dome-text">
        <Text
          type="div"
          theme="normal"
          info="居中文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
          align="center"
        />
      </div>
      <div className="dome-text">
        <Text
          type="div"
          theme="normal"
          info="右对文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
          align="right"
        />
      </div>
      <div className="dome-text">
        <Text
          type="div"
          theme="normal"
          info="两端对齐文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文abc案文案"
          align="justify"
        />
      </div>
      <div className="dome-text">
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#ff7200' }}
        />
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#2d83d2' }}
        />
      </div>
      <div className="dome-text">
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#ff7200' }}
        />
        <Text
          theme="normal"
          info="top"
          verticalAlign="top"
          style={{ background: '#2d83d2' }}
        />
      </div>
      <div className="dome-text">
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#ff7200' }}
        />
        <Text
          theme="normal"
          info="middle"
          verticalAlign="middle"
          style={{ background: '#2d83d2' }}
        />
      </div>
      <div className="dome-text">
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#ff7200' }}
        />
        <Text
          theme="normal"
          info="bottom"
          verticalAlign="bottom"
          style={{ background: '#2d83d2' }}
        />
      </div>
      <div className="dome-text">
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#ff7200' }}
        />
        <Text
          theme="normal"
          info="text-top"
          verticalAlign="text-top"
          style={{ background: '#2d83d2' }}
        />
      </div>
      <div className="dome-text">
        <Text
          theme="normal"
          info="baseline"
          verticalAlign="baseline"
          style={{ background: '#ff7200' }}
        />
        <Text
          theme="normal"
          info="text-bottom"
          verticalAlign="text-bottom"
          style={{ background: '#2d83d2' }}
        />
      </div>
    </>
  );
}
~~~`;

export const Demo3 = `
~~~js
import React, { useState } from 'react';
import { Text } from 'react-fule-ui';

export default function DomeText() {
  const [num, setNum] = useState(4);
  const onClick = (data) => {
    setNum(data);
  };
  const info = (
    <Fragment>
      <p>
        她偷偷跑进去，里面的人似乎没有发现。她心想：这也太没危机意识了。她蹑手蹑脚走进屋里，里面有些乱，但是还算干净，桌子上放着茶具，似乎好久没用过，有一层薄薄的灰，沙发看起来有点上了年代，里面传来哗啦啦的声响，她忍不住往前靠，想看个究竟。越靠近心跳的越厉害，那是水声，有模糊的影子，我不能，我不能，继续往前，她脑子有点乱，思想斗争了好久，她终于还是理智了一回...
      </p>
      <p>
        她退出房间了，心头不断起伏，她想等他洗好澡。终于她听不到水声，她假装关了门，又敲起了房门。嘭嘭嘭。
      </p>
    </Fragment>
  );

  return (
    <>
      <div className="dome-text">
        <Text
          overflow="1"
          info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
        />
      </div>
      <div className="dome-text">
        <Text
          overflow="2"
          info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
        />
      </div>
      <div className="dome-text">
        <Text
          overflow="3"
          info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
        />
      </div>
      <div className="dome-text">
        <Text
          overflow="4"
          info="我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案我是文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
        />
      </div>
      <div className="dome-text">
        <Select defaultValue="4" onChange={onClick} size="full">
          {[...Array(50)].map((item, index) => (
            <Select.Item key={index}>{index + 1}</Select.Item>
          ))}
        </Select>
        <Text overflow={num} show="more" info={info} />
      </div>
    </>
  );
}
~~~`;
